import React, { useState, useEffect } from "react";
import { ConfigProvider, Tabs } from "antd";
import LineChart from "./StatisticalGraph/LineChart";
import LetterFrequencyChart from "./StatisticalGraph/LetterFrequencyChart";
import PieChart from "./StatisticalGraph/PieChart";
import axios from 'axios'; // 假设你已经封装了axios并可以直接使用  
import { productExchange, productsTop } from "../../api/axios8081"

const { TabPane } = Tabs;

// 假设你的封装好的axios接口如下：  
// 你可以根据实际情况调整这些函数的实现  

interface CoTagsProps {
  beginTime?: string; // 接收时间字符串而不是 Date 对象  
  endTime?: string;
}

const CoTags: React.FC<CoTagsProps> = (props) => {
  
  
  const { beginTime, endTime } = props;
  const onChange = (key: string) => {
    console.log(key);
  };

  const LineChartWithData = () => (
    <LineChart beginTime={beginTime} endTime={endTime} /> // 假设 LineChart 组件可以处理这些字符串  
  );


  return (
    <ConfigProvider
      theme={{
        components: {
          Tabs: {
            titleFontSize: 15,
          },
        },
      }}
    >
      <Tabs defaultActiveKey="1" onChange={onChange} centered>
        <TabPane tab="兑换量" key="1">
          <LineChart /> {/* 不再传递data prop，因为LineChart会自己获取 */}
        </TabPane>
        <TabPane tab="销量Top20" key="2">
          <LetterFrequencyChart />  {/* 类似修改LetterFrequencyChart */}
        </TabPane>
        <TabPane tab="兑换方式" key="3">
          <PieChart /> {/* 类似修改PieChart */}
        </TabPane>
      </Tabs>
    </ConfigProvider>
  );
};

export default CoTags;